<template>
  <div id="app">
    <!--顶部栏-->
    <header class="app-header">
      <div class="logo" @click="goHome()"></div>
      <div class="action">
        <ul>
          <li v-for="(item,index) in items" :key="index">
            <router-link :to="item.path" :style="{color:item.color}">{{item.title}}</router-link>
          </li>
        </ul>
      </div>
    </header>
    <!--//路由占位-->
    <router-view></router-view>
    <!--底部-->

      <div class="douban-app">
        <div class="info">
          <img src="https://img3.doubanio.com/f/talion/7837f29dd7deab9416274ae374a59bc17b5f33c6/pics/card/douban-app-logo.png" alt="#">
          <div class="info-content"><strong>豆瓣</strong>
            <div>我们的精神角落</div>
          </div>
        </div>
        <a href="#" class="cl">去 App Store 免费下载 iOS 客户端</a>
      </div>

  </div>
</template>

<script>
export default {
//  name: 'app'
  data(){
      return{
          items:[{
              title:'电影',
              color:'#2384E8',
              path:'/movie'
          },{
            title:'图书',
            color:'#9F7860',
            path:'/books'
          },{
            title:'音乐',
            color:'#E4A813',
            path:'/music'
          },{
            title:'新闻',
            color:'#2AB8CC',
            path:'/news'
          }]
      }
  },
  methods:{
        goHome(){
          this.$router.replace('/Home');
        }
  }
}
</script>

<style scoped>
.app-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  height: 45px;
  line-height: 45px;
  background-color: #fff;
  color :#00b600;
  border-bottom: 2px solid #eee;
}
  .app-header .logo{
    float: left;
    background: url("assets/douban.png") center no-repeat;
    background-size: 46px 22px;
    margin-left: 15px;
    height: 45px;
    width: 46px;
  }
  .action ul{
    margin:0;
    padding: 0;
    line-height: 45px;
    float: right;
    list-style: none;
  }
  .action li{
    float: left;
  }
  .action li a{
    padding: 0 10px;
  }
/*底部*/
.douban-app {
  padding: 0 0 20px 0;
  margin-top: 50px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 15px;
}
.douban-app .info {
  margin: 0 auto 15px;
  overflow: hidden;
  text-align: left;
  font-size: 14px;
  display: inline-block;
  color: #111;
}

.douban-app .info img {
    float: left;
    margin-right: 12px;
    width: 48px;
  }
.info-content {
  overflow: hidden;
}
.info-content strong {
    font-size: 24px;
    font-weight: normal;
    line-height: 28px;
  }
.info-content div {
    white-space: pre;
    line-height: 20px;
    color: black;
  }

.douban-app a {
    display: block;
  }
</style>
